<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--绑定属性-->
    <title>v-bind指令</title>
    <script src="./js/vue.js"></script>
    <style>
        .picOver {
            border: 2px solid #333;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
            width: 300px;
            height: auto;
        }
    </style>
</head>

<body>
    <div id="app">
        <h1>{{msg}}</h1>
        <img v-bind:class="picOver" v-bind:src="url" v-bind:title="title" width="200px" @mouseover = "changeUrlOver" @mouseout = "changeUrlOut" />
    </div>
</body>

</html>
<script>
    new Vue({
        el: "#app",
        data: {
            msg: 'hello 诺亚!',
            url:'https://tse4-mm.cn.bing.net/th/id/OIP-C.TqC13C9e40DmUaGiyT_GXwHaLH?w=204&h=306&c=7&r=0&o=5&dpr=1.3&pid=1.7',
            title: '诺亚',
            picOver:'',
        },
        methods: {
            // 鼠标移入事件
            changeUrlOver(){
                this.url = 'https://tse4-mm.cn.bing.net/th/id/OIP-C.EOY816J8cGTdYzgbcneWsgHaLu?w=198&h=314&c=7&r=0&o=5&dpr=1.3&pid=1.7',
                this.title = '奈克瑟斯',
                this.picOver = 'picOver'
                
            },
            // 鼠标移出事件
            changeUrlOut(){
                this.url = 'https://tse4-mm.cn.bing.net/th/id/OIP-C.TqC13C9e40DmUaGiyT_GXwHaLH?w=204&h=306&c=7&r=0&o=5&dpr=1.3&pid=1.7',
                this.title = '诺亚',
                this.picOver = ''
            },
        },
        computed: {
            
        },
    })
</script>